<template>
  <div>
    <div class="tab_warp">
      <tab
        :line-width="1"
        v-model="tabIndex"
        active-color="#E83263"
        custom-bar-width="40px"
        default-color="#333"
      >
        <tab-item>消费</tab-item>
        <tab-item>充值</tab-item>
        <tab-item>提现</tab-item>
        <tab-item>收益</tab-item>
      </tab>
    </div>
    <div class="list_warp">
      <div class="list_" v-if="tabIndex==0" v-for="(item,index) in goldConsumptionLog" :key="index">
        <div class="list_item">
          <div style="width:70px;text-align:center;">{{item.consumType}}</div>
          <!-- <div>添加好友</div> -->
          <div class="lsitMessage">
            <div>可提现Q豆 {{item.canWithdraw}}</div>
            <div>不可提现Q豆 {{item.notWithdraw}}</div>
          </div>
          <div class="lsitMessage">{{item.consumTime}}</div>
        </div>
      </div>
      <div class="list_" v-if="tabIndex==1" v-for="(item,index) in goldRecharge" :key="index">
        <div class="list_item">
          <div style="width:80px;text-align:center;">{{item.rechargeName}}</div>
          <div class="lsitMessage">
            <div style="width:50px;text-align:center;">+{{item.rechargeAmount}}</div>
          </div>
          <div class="lsitMessage">2019/12/12 12:00</div>
        </div>
      </div>
      <div class="list_" v-if="tabIndex==2" v-for="(item,index) in goldWithdraw" :key="index">
        <div class="list_item">
          <div>{{item.withdrawName}}</div>
          <div class="lsitMessage">
            <div>Q豆{{item.withdrawMoney}}</div>
            <div>到账金额{{item.withdrawMoney/10}}</div>
          </div>
          <div class="lsitMessage">
            <div style="color:#E83263">{{item.withdrawStatus}}</div>
            <!-- <div style="color:#333333">已到账</div> -->
            <!-- <div style="color:#FF2727">已拒绝</div> -->
            <div>{{item.withdrawTime|datee}}</div>
          </div>
        </div>
        <div class="passMes" v-if="item.withdrawStatus=='已拒绝'">拒绝理由：{{item.denialReason}}</div>
      </div>
      <div class="list_" v-if="tabIndex==3" v-for="(item,index) in goldIncome" :key="index">
        <div class="list_item">
          <div style="width:70px;text-align:center;    line-height: 13px;
    font-size: 12px;">{{item.incomeName}}</div>
          <div class="lsitMessage">
            <div>可提现Q豆 {{item.canWithdraw}}</div>
            <div>不可提现Q豆 {{item.notWithdraw}}</div>
          </div>
          <div class="lsitMessage">
            <div>{{item.incomeTime}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Tab, TabItem } from "vux";
import * as API from "@/http/common/api";
export default {
  name: "my",
  data() {
    return {
      tabIndex: 0,
      userInfo: {
        userGoldBalance: 0
      },
      goldConsumptionLog: [], //消费
      goldRecharge: [], //充值
      goldWithdraw: [], //提现
      goldIncome: [], //收益
    };
  },
  methods: {
    // 获取Q豆消费log
    getGlodList() {
      this.$http(API.goldConsumption, {
        type: "GET",
        params: {
          userId: this.userInfo.userId
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            this.goldConsumptionLog = res.data.Message;
          } else {
            this.$vux.toast.show({
              text: res.data.message,
              type: "text"
            });
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
          this.$vux.toast.show({ text: "网络错误，请重试", type: "text" });
        });
    },
    // 获取Q豆充值log
    getGoldRecharge() {
      this.$http(API.goldRecharge, {
        type: "GET",
        params: {
          userId: this.userInfo.userId
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            this.goldRecharge = res.data.Message;
          } else {
            this.$vux.toast.show({
              text: res.data.message,
              type: "text"
            });
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
          this.$vux.toast.show({ text: "网络错误，请重试", type: "text" });
        });
    },
    // 获取Q豆提现log
    getGoldWithdraw() {
      this.$http(API.goldWithdraw, {
        type: "GET",
        params: {
          userId: this.userInfo.userId
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            this.goldWithdraw = res.data.Message;
          } else {
            this.$vux.toast.show({
              text: res.data.message,
              type: "text"
            });
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
          this.$vux.toast.show({ text: "网络错误，请重试", type: "text" });
        });
    },
    // 获取Q豆收益log
    getGoldIncome() {
      this.$http(API.goldIncome, {
        type: "GET",
        params: {
          userId: this.userInfo.userId
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            this.goldIncome = res.data.Message;
          } else {
            this.$vux.toast.show({
              text: res.data.message,
              type: "text"
            });
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
          this.$vux.toast.show({ text: "网络错误，请重试", type: "text" });
        });
    }
  },
  mounted() {
    this.userInfo = JSON.parse(this.$localStorage.get("userInfo"));
    this.getGlodList();
    this.getGoldRecharge();
    this.getGoldIncome();
    this.getGoldWithdraw();
  },
  components: {
    Tab,
    TabItem
  },
  filters:{
    datee(date){
     //date是传入的时间
  let d = new Date(date);

  let month = (d.getMonth() + 1) < 10 ? '0'+(d.getMonth() + 1) : (d.getMonth() + 1);
  let day = d.getDate()<10 ? '0'+d.getDate() : d.getDate();
  let hours = d.getHours()<10 ? '0'+d.getHours() : d.getHours();
  let min = d.getMinutes()<10 ? '0'+d.getMinutes() : d.getMinutes();
  let sec = d.getSeconds()<10 ? '0'+d.getSeconds() : d.getSeconds();

  let times=d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec;

  return times
    }
  }
};
</script>
<style scoped>
.tab_warp /deep/ .vux-tab .vux-tab-item {
  background: #fefefe;
  font-size: 16px;
}
.list_warp {
  margin-top: 5px;
}
.list_ {
  border-bottom: 1px solid #eee;
}
.list_:last-child {
  border: none;
}
.list_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  height: 49px;
  padding: 0 15px;
  font-size: 14px;
  box-sizing: border-box;
}

.lsitMessage {
  color: #999;
  font-size: 12px;

}
.passMes {
  background: #fff;
  font-size: 10px;
  color: #999;
  padding: 0 15px 10px 15px;
  box-sizing: border-box;
}
</style>
